<template>
  <div class="bg-white text-center dashboard">
    <!-- <h1>欢迎来到智慧决策中心</h1> -->
    <fullscreen style="height: 100%; background: #f7f8fa; overflow-y: auto">
      <Preview
        ref="paneViewPreviewRef"
        :component-data="componentData"
        :canvas-style-data="styleData"
        :show-type="'width'"
        :panel-info="info"
      />
    </fullscreen>
  </div>
</template>

<script>
import Preview from '@/components/canvas/components/editor/Preview'
import { getHome, initPanelData } from '@/api/panel/panel'
import { mapState } from 'vuex'
import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/utils/utils'
export default {
  name: 'Dashboard',
  components: {
    Preview,
  },
  data() {
    return {
      panelId: '',
      canvasId: 'canvas-main',
      componentData: [],
      styleData: {},
      info: {},
    }
  },
  computed: {
    mainCanvasComponentData() {
      return getNowCanvasComponentData(this.canvasId)
    },
    ...mapState(['componentData', 'canvasStyleData', 'panelViewDetailsInfo']),
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      let homeRes = await getHome()
      this.panelId = homeRes?.data?.panelId
      initPanelData(this.panelId, false, () => {
        this.componentData = getNowCanvasComponentData(this.canvasId)
        this.styleData = this.canvasStyleData
        this.info = this.panelInfo
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
}

::v-deep .component-outer:hover {
  box-shadow: none;
}
</style>
